<template>
	<div class="words-order-container">
		<div class="words-order-item" v-for="(item, index) in state.wordsSvg" >
			<img 
				class="img" 
				:style="[{ width:transformPxToVw(size) + 'vw', height:transformPxToVw(size) + 'vw' }]" 
				:src="transformSvgToBase64(item)" />
			<div class="words-order-footer">
				{{ orderString(index) }}
			</div>
		</div>
	</div>
</template>
<script setup>
	import { Base64 } from 'js-base64';
	import { onMounted, reactive, getCurrentInstance, watch } from "vue";
	import { jsonFile } from "@/api"
	const { proxy } = getCurrentInstance()
	const props = defineProps({
		words:{
			type:String,
			default:""
		},
		size:{
			type:Number,
			default: 50
		},
		orderStr: {
			type:String,
			default:""
		}
	})
	
	const state = reactive({
		base64String:"",
		toggle:false,
		lastDeg:0,
		wordsSvg: []
	})
	
	const getWordsJson = () => {
		props.words && jsonFile(props.words).then((res) => createOrderWords(res.strokes))
	}
	
	const orderString = (index) => {
		return props.orderStr[index]
	}
	const createOrderWords = (strokes) => {
		let wordsSvg = []
		strokes.forEach((item, index) => {
			let path = ''
			let svgPath = `<svg width="60" height="60" fill="none" xmlns="http://www.w3.org/2000/svg" style="border: 10rpx solid #ddd; background-color: rgb(255, 255, 255);">
				<line x1="30" y1="0" x2="30" y2="60" stroke-dasharray="8" stroke="#ddd"></line>
				<line x1="0" y1="30" x2="60" y2="30" stroke-dasharray="8" stroke="#ddd"></line>
				<line x1="0" y1="0" x2="60" y2="60" stroke-dasharray="8" stroke="#ddd"></line>
				<line x1="60" y1="0" x2="0" y2="60" stroke-dasharray="8" stroke="#ddd"></line>
				<g transform="translate(5, 48.9453125) scale(0.048828125, -0.048828125)">
			`
			strokes.forEach((s, i) => {
				const fill = i <= index ? 'fill:rgb(0, 0, 0)' : 'fill:rgb(180, 180, 180)'
				path += `<path d="${s}" style="${fill};"></path>`
			})
			svgPath += `${path}</g></svg>`
			wordsSvg.push(svgPath)
		})
		state.wordsSvg = wordsSvg
		
	}
	watch(() => props.words, () => getWordsJson())
 
	const transformSvgToBase64 = (svgTxt) => {
		return 'data:image/svg+xml;base64,' + Base64.encode(svgTxt);
	}
	const transformPxToVw = (num,designWidth=375) => {
		let vwVal=(100/designWidth)*num;
		return vwVal.toFixed(3)
	}
</script>
 
<style lang="scss" scoped>
.words-order-container {
	display: inline-flex;
	flex-wrap: wrap;
	row-gap: 8px;
}
.words-order-item{
	display: inline-block;
	.img {
		border: 3rpx solid #ddd;
		vertical-align: top;
	}
}
.words-order-footer {
	border-top: none;
	border-radius: 0 0 8rpx 8px;
	font-size: 20px;
	padding: 8rpx 0;
	text-align: center;
	color: #999;
	line-height: 24px;
}
</style>